import $ from './lib/jquery.esm.js';
import cookie from './lib/cookie.js';

let shop = cookie.get('shop');

shop = JSON.parse(shop);
// console.log(shop);
let idList = shop.map(el => el.id).join();

$.ajax({
  type: "get",
  url: "../../interface/shop.php",
  data: { idList },
  dataType: "json"
}).then(res => {
  // console.log(res);
  // }).catch(xhr=>{
  //   console.log(xhr.status);
  // });
  // $('#jian').on('click', function () {
  //   current[0].num --
  //   // <li id="qian">${current[0].num -1}</li>
  // });




  let template = '';
  res.forEach((el, i) => {
    let pic = JSON.parse(el.picture);
    // console.log(el)
    let current = shop.filter(elm => elm.id === el.id);
    // console.log(current)
    //   template += `<li class="item">
    //   <div>
    //     <input type="checkbox">
    //   </div>

    //   <div class="img">
    //     <img src="./${pic[0].src}" alt="">
    //   </div>

    //   <div class="title">
    //     ${el.title}
    //   </div>
    //   <div class="num">
    //     <input type="number" value="${current[0].num}" min="1">
    //   </div>
    //   <div class="price">单价:${(+el.price).toFixed(2)}</div>
    //   <div class="sum-price">总价:${(el.price * current[0].num).toFixed(2)}</div>
    //   <div>
    //     <a href="javascript:;" class="removeitem" data-id="${el.id}">删除</a>
    //   </div>
    // </li>`;
    template += `
    <div class="box5">
    <div class="box5-top">
      <div class="box5-left">
        <div>
          <input type="checkbox">
          <img src="${pic[0].src}" alt="">
        </div>
        <div>
          <p>${el.title}</p>
          <p>
            <img src="../img/GWC/设置.png" alt="">
            <span>选服务</span>
          </p>
        </div>
        <p>
          <span>远峰蓝色</span><br>
          <span>128GB</span>
        </p>
      </div>
      <div class="box5-right">
        <p>￥${el.price}</p>
        <div>
          <ul>
            <li class="jian" data-id="${el.id}">-</li>
            <li >${current[0].num}</li>
            <li class="jia">+</li>
            <span>有货</span>
          </ul>
        </div>
        <p class="weight">￥${el.price}</p>
        <p class="active">
          <span class="removeitem" data-id="${el.id}">删除</span>
          <br>
          <span>移入关注</span>
        </p>
      </div>
    </div>
    <div class="box5-bottom">
      <p>
        【赠品】体验卡免费领，多款APP免流，超大流量任性用，点击领取
      </p>
      <p>
        <span>x1</span>
        <span>查看价格</span>
      </p>
    </div>
  </div>
         `;

    // console.log(el.price*current[0].num); 
  });

  // console.log(template);
  $('.box4').after(template)
  // $('.list').html(template);

  $('.removeitem').on('click', function () {

    let res = shop.filter(el => el.id != $(this).attr('data-id')); // 筛选被点击的元素

    cookie.set('shop', JSON.stringify(res)); // 剩余内容写回cookie
    location.reload();// 刷新页面
  });

  $('.jian').on('click', function () {
    // let res = shop.filter(el => el.id != $(this).attr('data-id'));
    // console.log(res);
    // <li id="qian">${current[0].num -1}</li>
   
    console.log($(this).attr('data-id'));
    shop.forEach(el => {
      if (el.id == $(this).attr('data-id')) {
        --el.num;
       console.log(this.netx());

      }
    
    });
    let leg=shop.length;
    shop=shop.filter(el=>el.num>=1);
    cookie.set('shop', JSON.stringify(shop));
    
    if(shop.length<leg){
      location.href='../html/GWC.html'
    }

  });



}).catch(xhr => {
  console.log(xhr.status);
});